<template>
  <div v-if="!initializing" class="multiple-input">
    <el-input
      v-for="item in number"
      :key="item"
      v-model="currValues[item - 1]"
      @change="handleChange"
      @blur="handleBlur"
      :size="size"
    ></el-input>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const emit = defineEmits(['change']);
const props = defineProps({
  number: {
    type: Number,
    default: 1
  },
  size: String
});
const modelValue = defineModel();
const currValues = ref([]);
const initializing = ref(true);

const handleChange = () => {
  const result = [];
  for (let index=0; index<props.number; index++) {
    result.push(currValues.value[index]);
  }
  modelValue.value = result.join(',');
  emit('change');
};

const handleBlur = (event) => {
  handleChange();
  emit('blur', event);
};

watch(() => modelValue.value, (val) => {
  initializing.value = true;
  currValues.value = (val || '').split(',');
  while (currValues.value.length < props.number) {
    currValues.value.push('');
  }
  initializing.value = false;
}, {immediate: true});
</script>

<style scoped lang="scss">
.multiple-input {
  display: flex;
  flex-direction: row;
  .el-input:first-child {
    margin-left: 0;
  }
  .el-input {
    margin-left: 3px;
  }
}
</style>